<template>
  <div class="flex">
    <template v-for="(item, i) in timeList" :key="i">
      <el-tooltip
        effect="dark"
        placement="top"
        class="box-item"
        trigger="hover"
        :ref="(el: any) => {
          if (timeIndex != i && el) el.hide()
        }
          "
        :content="item.tooltip"
      >
        <span
          v-if="i < 2"
          class="label"
          :class="{ active: timeIndex == i }"
          @click="handleIndex(i, item)"
        >
          {{ item.title }}
        </span>
      </el-tooltip>
      <!-- 自然月 -->
      <el-popover
        v-if="i == 2"
        :visible="monthVisible"
        placement="bottom"
        :width="360"
        trigger="click"
      >
        <div class="flex">
          <el-date-picker
            type="month"
            v-model="naturalMonth"
            placeholder="请选择月份"
            style="margin-right: 10px"
            :disabled-date="disableMonthFnc"
          />
          <el-button @click="handleCancel('month')">取消</el-button>
          <el-button type="primary" @click="handleMonth()">确定</el-button>
        </div>

        <template #reference>
          <div class="relative">
            <el-tooltip
              effect="dark"
              placement="top"
              class="box-item"
              trigger="hover"
              :ref="(el: any) => {
                if (timeIndex != i && el) el.hide()
              }
                "
              :content="item.tooltip"
            >
              <span
                class="label"
                :class="{ active: timeIndex == i }"
                @click="handleIndex(i, item)"
              >
                {{ item.title }}
              </span>
            </el-tooltip>
          </div>
        </template>
      </el-popover>
      <!-- 自定义 -->
      <el-popover
        v-if="i == 3"
        :visible="customDateVisible"
        placement="bottom"
        :width="460"
        trigger="click"
      >
        <template #reference>
          <div class="relative">
            <el-tooltip
              effect="dark"
              placement="top"
              class="box-item"
              trigger="hover"
              :ref="(el: any) => {
                if (timeIndex != i && el) el.hide()
              }
                "
              :content="item.tooltip"
            >
              <span
                v-if="i == 3"
                class="label"
                :class="{ active: timeIndex == i }"
                @click="handleIndex(i, item)"
              >
                {{ item.title }}
              </span>
            </el-tooltip>
          </div>
        </template>
        <div class="flex">
          <el-date-picker
            type="daterange"
            v-model="naturalCustomDate"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="margin-right: 10px"
            :disabled-date="disableMonthFnc"
          />
          <el-button @click="handleCancel('custom')">取消</el-button>
          <el-button type="primary" @click="handleCustomDate()">确定</el-button>
        </div>
      </el-popover>
    </template>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { constant } from 'lodash'
import { GetMonthLength } from '~/src/utils/utils'

/**
 * @var
 */
const timeList = ref<any>([
  { title: '近7天', dataType: 'week', tooltip: '' },
  { title: '近15天', dataType: '15days', tooltip: '' },
  { title: '自然月', dataType: 'month', tooltip: '未选择时间' },
  { title: '自定义', dataType: 'custom', tooltip: '未选择时间' },
])

const timeIndex = ref(0)
const dataType = ref('week')

// 前一天 -前七天
const dayBefore = dayjs().subtract(0, 'day').format('YYYY-MM-DD')
const sevenDayBefore = dayjs().subtract(6, 'day').format('YYYY-MM-DD')
const DayBefore15 = dayjs().subtract(14, 'day').format('YYYY-MM-DD')

const nowTimes = ref<any>(dayBefore)
timeList.value[0].tooltip = sevenDayBefore + ' / ' + dayBefore
timeList.value[1].tooltip = DayBefore15 + ' / ' + dayBefore

// 自然月的值
const naturalMonth = ref<any>(null)
const naturalCustomDate = ref<any>(null)
const monthVisible = ref(false)
const customDateVisible = ref(false)

const disableMonthFnc = (time: Record<string, any>): boolean => {
  if (time.getTime() > new Date().getTime()) {
    return true
  } else {
    return false
  }
}

/**
 * @method
 */

const emit = defineEmits(['selectDate'])

const handleIndex = (i: number, row: any) => {
  monthVisible.value = false
  customDateVisible.value = false
  timeIndex.value = i
  dataType.value = row.dataType

  if (i < 2) {
    nowTimes.value = setTimesInterval(i)
    emit('selectDate', { time: nowTimes.value, dataType: dataType.value })
  }

  if (i == 2) {
    monthVisible.value = true
  }
  if (i == 3) {
    customDateVisible.value = true
  }
}

// 筛选月份
const handleMonth = () => {
  monthVisible.value = false
  /* 計算每月幾天 */
  const monthLength = GetMonthLength(
    dayjs(naturalMonth.value).format('YYYY-MM')
  )
  timeList.value[2].tooltip =
    dayjs(naturalMonth.value).format('YYYY-MM-01') +
    ' / ' +
    dayjs(naturalMonth.value).format(`YYYY-MM/${monthLength}`)

  nowTimes.value = dayjs(naturalMonth.value).format('YYYY-MM')

  emit('selectDate', { time: nowTimes.value, dataType: dataType.value })
}
// 自定义时间
const handleCustomDate = () => {
  customDateVisible.value = false

  nowTimes.value =
    dayjs(naturalCustomDate.value[0]).format('YYYY-MM-DD') +
    ' / ' +
    dayjs(naturalCustomDate.value[1]).format('YYYY-MM-DD')

  timeList.value[3].tooltip = nowTimes.value

  emit('selectDate', { time: nowTimes.value, dataType: dataType.value })
}

const setTimesInterval = (i = 0) => {
  if (i == 0) return dayBefore
  if (i == 1) return sevenDayBefore + '/' + dayBefore
}

// 取消
const handleCancel = (type = 'month') => {
  if (type == 'month') {
    monthVisible.value = false
    naturalMonth.value = ''
  }
  if (type == 'custom') {
    customDateVisible.value = false
    naturalCustomDate.value = ''
  }
}

/**
 * @实例
 */
defineExpose({
  nowTimes,
  timeIndex,
})
</script>

<style lang="scss" scoped>
.label {
  display: inline-block;
  padding: 3px 12px;
  background: #f2f3f5;
  font-family: PingFangSC-Regular;
  font-weight: 300;
  font-size: 12px;
  color: #595959;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  cursor: pointer;

  &:last-child {
    border-radius: 0 4px 4px 0;
  }

  &.active {
    background: #1456f0 !important;
    color: #ffffff !important;
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
  }
}
</style>
